<template>
    <div class="loading-spinner" v-if="visible">
        <el-icon class="is-loading" :size="size">
            <Loading />
        </el-icon>
        <span v-if="text" class="loading-text">{{ text }}</span>
    </div>
</template>

<script setup lang="ts">
import { Loading } from '@element-plus/icons-vue'

interface Props {
    visible?: boolean
    size?: number
    text?: string
}

withDefaults(defineProps<Props>(), {
    visible: true,
    size: 20,
    text: ''
})
</script>

<style scoped>
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
}

.loading-text {
    color: #666;
    font-size: 14px;
}
</style>
